Even I'm Java Srping Boot software backend engineer, but your content is always intereted me, I appreciate your hard work to bring us such a high quality content. Thank you Dave God Bless you and your family and also welcome back :)
Great video. Thanks. However I'm having a little trouble wrapping my head around exactly what is happening. I am still confused as to why the modal disappears when we navigate back to the home page, and for that matter why the non modal version isn't showing when the page is first displayed. When using parallel routes to implement a dashboard all the parallel routes are rendered on screen together. Since the modal seems to be implemented as a slot in the layout in the same way, why is it not displayed like all the slots are displayed initially on a dashboard? I'm wondering whether it is the null default.tsx that makes the modal disappear, but you seemed to downplay its significance so that's probably not it. Perhaps, brain cell impaired such as myself, more explanation contrasting the previous modal implementation, ie opening and closing the modal, and the nextjs 14 approach of having the modal always open would be a good.
I always find reloading a page with an open modal to lose its content outside the modal to be frustrating, because I expect the modal to disappear when I refresh the page. Instead, it does the exact opposite, which can be very annoying. Initially, when I encountered this behavior on Instagram, I thought it was a bug.
This is such a mess. Why in the hell would you need to create so many nested structures to build something simple. It's literally impossible to understand what belongs together when every component is spread around 10 different directories. Nothing makes sense here, absolutely no locality of behaviour, only technical non-sense.
Isn't this just a pop up with unnecessarily changing the url? I'm failing to see a valid use case of this, a pop up with two buttons "visit" and "share" would render this feature completely unnecessary. Perhaps, Nextjs should've made their next/link easier to use like they do in tanstack router instead of baking new features that don't really affect the DX that much. Maybe I'm just too dumb to understand this.
Any idea how to implement it for dynamic routes? For example i have route app/ game/[id]/page.tsx - where i should open modal review/[id]/page.tsx target page it feels very buggy, and docs are not clear about it
Please help me withn nextjs new authjs v5 login with both through Googleprovider and credentials login how to manage both login simultaneously through rest api login.
I have everyone that starts with our company to go through your NextJS/Tailwind Course so they can be assets in our teams as fast as possible. Keep em coming!
Hello Dave at ruclips.net/video/Ft2qs7tOW1k/видео.html when creating the modal component, since the props defaultOpen and open are boolean, I guess it'll be cleaner to just specify the properties because they'll evaluate to true by default. Thank you.
Hello, can you please advise me how I can implement a modal like in twitter when creating a post? It seems to be the same, but when you reload the page, it doesn't show you a new page, instead it shows a modal panel with a dashboard in the background Same goes for the profile edit modal, when you click edit, it opens the modal with /settings/profile url, but when the page reloads, the modal is saved but the background changes to the dashboard I'd really appreciate your help.
Frameworks have just gone off the deep end, respect to anybody that actually has to implement these behemoths. I am content writing stored procedures for you to call-just stop trying to run JS in my SQL servers.
A modal will display over the current page. In Next.js, you can intercept a route segment and display it in a modal. In business apps, a common use case would be a page with a table of results. You don't want to keep submitting a form to see those results so you keep that page underneath while working with the individual records from the table in a modal that displays a form. Many other uses but this one is common.
A modal within a modal - I'd avoid if possible, but sometimes weird things are necessary. Parallel routes are a good idea for a modal - not sure about layering them.
Great tutorial, loved it, can you implement said functionality with react and react router dom v6, i have been trying to do sth similar but can't find a working solution, thanks by the way
Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website
I might someday, but it isn't high on my list because Kinde gives you lots of features and up to 10k users for free. Makes it an easy choice for most of my projects.
Thanks Dave and welcome back.😊 This intercepting route is still confusing, maybe I need to write my own code. A tutorial video for modal with some form and data will be great. What about a MessageBox Modal with Tabs like inbox and send form etc.
Thank you! And great suggestions. Yes, working with intercepting routes will help you see how they work. In this modal example, we intercept the request for the photo route segment and instead, display the mirrored route in a modal.
I wish I knew about your channel when I was in college, but I'm glad you've decided to chose this path and help us grow as developers. Your contribution brings so much value to people like myself. I've been following your tutorials and there hasn't been a point where I've felt lost. Your teaching style is simple and effective. Loving it! Thank you Dave!
Alway thank you Dave. I am usually doing that in an e-commerce shop so I can show the product details and of course the check out. I’d be happy if you can show forms and tables as you suggested ❤
FYI - intercepting routes in a subdirectory are broken in 14.2.3. They do work in the root of the app though. Fought that bug for about 4 hours yesterday, rolled next back to 14.1 and they work fine.
Interesting indeed. It must be a specific scenario as I have a work project currently on 14.2.3 which uses a subdirectory (..)route-segment that is working with no issues.
@@DaveGrayTeachesCode Could have been my specific scenario, but I did find a few reports in github complaining about the same issue. I was trying to intercept a rout 3 levels deep - /dashboard/questions/edit and it just wouldn't work no matter what I tried.
Nice. Thanks. What if I have a link inside the modal like previous and next. Then after clicking these link the close button won't close the dialog instead it will keep going back to the history. What would you recommend?
I know that router.push(specificPath) can solve this. But in my case I have login button on navbar and inside the modal I have link to sign up form as well. So I want when user closes the modal they go back from where they came from
That's how modals work - they overlay the page underneath. The shadcn/ui Dialog component applies an overlay that has an opacity setting which lets you see what is underneath. You could customize it.
From my CV, Technology Summary Experience: Total industry experience 14 years. Roles 2 years as Director, 3 years as Tech Lead, Full-stack Developer (8 years). AWS (5 years), Typescript/Node (6 years), React/Native (6 years), C# & Python (4 years) Current Role: Vercel, NextJS, Inngest, Twilio, Tailwind, ShadCN, Jest, Docker, Apache Superset, VercelAI, LangGraph, OpenAI, ClaudeAI, pgVector, XState, AWS EC2/ECS/S3/VPC/Lambda/SQS/SFN/SNS, Terraform. And I still find your videos very useful!
Even I'm Java Srping Boot software backend engineer, but your content is always intereted me, I appreciate your hard work to bring us such a high quality content. Thank you Dave God Bless you and your family and also welcome back :)
Thank you for the kind words! I'm glad you like my content even though I have not covered Spring Boot!
Great video. Thanks. However I'm having a little trouble wrapping my head around exactly what is happening. I am still confused as to why the modal disappears when we navigate back to the home page, and for that matter why the non modal version isn't showing when the page is first displayed. When using parallel routes to implement a dashboard all the parallel routes are rendered on screen together. Since the modal seems to be implemented as a slot in the layout in the same way, why is it not displayed like all the slots are displayed initially on a dashboard? I'm wondering whether it is the null default.tsx that makes the modal disappear, but you seemed to downplay its significance so that's probably not it. Perhaps, brain cell impaired such as myself, more explanation contrasting the previous modal implementation, ie opening and closing the modal, and the nextjs 14 approach of having the modal always open would be a good.
I always find reloading a page with an open modal to lose its content outside the modal to be frustrating, because I expect the modal to disappear when I refresh the page. Instead, it does the exact opposite, which can be very annoying. Initially, when I encountered this behavior on Instagram, I thought it was a bug.
yes Dave, we want to see the video about a form in a modal
Thank you!
Me too. Although I think Ive figured it out, an example of modal login and sign-up forms would be greatly appreciated.
Really enjoyed this, kindly apply this on form
Thank you! Will do!
This is such a mess. Why in the hell would you need to create so many nested structures to build something simple. It's literally impossible to understand what belongs together when every component is spread around 10 different directories. Nothing makes sense here, absolutely no locality of behaviour, only technical non-sense.
Yeah, the Next.js App Router is opinionated about that. YMMV
what if i dont want a fallback route /photo/1 should always open the modal?
Did you find a solution?
Hey Dave Gary. Very helpful! I would love to see you making a video also about intercepted-searchbar 🙋♂🙋♂ thank you in advance.
Isn't this just a pop up with unnecessarily changing the url? I'm failing to see a valid use case of this, a pop up with two buttons "visit" and "share" would render this feature completely unnecessary.
Perhaps, Nextjs should've made their next/link easier to use like they do in tanstack router instead of baking new features that don't really affect the DX that much.
Maybe I'm just too dumb to understand this.
Any idea how to implement it for dynamic routes?
For example i have route
app/
game/[id]/page.tsx - where i should open modal
review/[id]/page.tsx target page
it feels very buggy, and docs are not clear about it
Hi. Anybody knows how to prevevnt feed page scrolling up when modal window appear?
Please help me withn nextjs new authjs v5 login with both through Googleprovider and credentials login how to manage both login simultaneously through rest api login.
Hmmmm...could be useful for a login form where a session/jwt expired.
you dropped this when I needed it. i've read the documentation but I didn't understand that much thanks for the video!!
Glad it was helpful!
This is great, thanks. Could this pattern support returning data or a callback from the modal to the route or component that called it?
sonner and toast component when triggered inside intercepting modal does not pop up or is not visible
Hello Dave! Thank you
I have everyone that starts with our company to go through your NextJS/Tailwind Course so they can be assets in our teams as fast as possible. Keep em coming!
That's awesome! Glad I could help 🙌
Yes. Modal with react table. I need it😊
Hey Dave,
Please make a playlist for Remix. It's much much better than NextJS. Thank you.
I've been wanting to do this. With their new announcements, it might be good to wait for the RRv7 merger.
Hello Dave at ruclips.net/video/Ft2qs7tOW1k/видео.html when creating the modal component, since the props defaultOpen and open are boolean, I guess it'll be cleaner to just specify the properties because they'll evaluate to true by default. Thank you.
Yes in this case. In many instances, you would use a trigger to open the model and then it needs to be able to receive more than one value.
Hello, can you please advise me how I can implement a modal like in twitter when creating a post? It seems to be the same, but when you reload the page, it doesn't show you a new page, instead it shows a modal panel with a dashboard in the background
Same goes for the profile edit modal, when you click edit, it opens the modal with /settings/profile url, but when the page reloads, the modal is saved but the background changes to the dashboard
I'd really appreciate your help.
You can load a modal without an intercepting route. Sounds like that is what you are describing.
can this works with shadcn sheet ui?
Frameworks have just gone off the deep end, respect to anybody that actually has to implement these behemoths.
I am content writing stored procedures for you to call-just stop trying to run JS in my SQL servers.
Bring the PHP course 😡😭
Hi and thank for your video. I am still confused as what problem does this solve tho?
A modal will display over the current page. In Next.js, you can intercept a route segment and display it in a modal. In business apps, a common use case would be a page with a table of results. You don't want to keep submitting a form to see those results so you keep that page underneath while working with the individual records from the table in a modal that displays a form. Many other uses but this one is common.
I am implementing a modal within a modal is this a good idea to do parallel routes?
A modal within a modal - I'd avoid if possible, but sometimes weird things are necessary. Parallel routes are a good idea for a modal - not sure about layering them.
Привет Дэйв! Спасибо за интересное видео. Очень жду новые выпуски. Ты потрясающий учитель. Спасибо, что делишься своими знаниями со всеми нами.
crazy! please can you do the other application of the modal ((:
You should set the vscode toolbar to the right side or maybe hide it so we can see the code
I usually press Alt+Z so all code lines wrap - so they should still be visible?
Thank you so much, Dave! Modal was kicking my ass
Great tutorial, loved it, can you implement said functionality with react and react router dom v6, i have been trying to do sth similar but can't find a working solution, thanks by the way
I will take a look in the near future. I'd like to cover RR7/Remix as they are merging.
@@DaveGrayTeachesCode thanks, I really appreciate
Enjoy your vacation, cheers to this industry!
Great ❤
You the best
Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website
I might someday, but it isn't high on my list because Kinde gives you lots of features and up to 10k users for free. Makes it an easy choice for most of my projects.
@@DaveGrayTeachesCode we are developer, we build own tools instead of relaying other. Thanks
@@rahulchourasiya4148 So go ahead Build your own Next-auth. why you are requesting to use it.
Hi Dave, I'm from Brazil 🇧🇷 and I'm learning a lot from all your videos..... I really appreciate you making this high quality content. thank you 😁✅
You're welcome!
NUM1
Thanks Dave and welcome back.😊
This intercepting route is still confusing, maybe I need to write my own code.
A tutorial video for modal with some form and data will be great.
What about a MessageBox Modal with Tabs like inbox and send form etc.
Thank you! And great suggestions. Yes, working with intercepting routes will help you see how they work. In this modal example, we intercept the request for the photo route segment and instead, display the mirrored route in a modal.
I wish I knew about your channel when I was in college, but I'm glad you've decided to chose this path and help us grow as developers. Your contribution brings so much value to people like myself. I've been following your tutorials and there hasn't been a point where I've felt lost. Your teaching style is simple and effective. Loving it!
Thank you Dave!
Thank you so much!
Hi Dave, I'm a big fan of yours.
And I'm very much looking forward to the day you will start a React Native course.
Thanks! And yes, I want to do that!
Alway thank you Dave. I am usually doing that in an e-commerce shop so I can show the product details and of course the check out. I’d be happy if you can show forms and tables as you suggested ❤
You're welcome! Good use cases!
Thanks for the content Dave - would be great to see your approach to editing data tables with modals in NextJS 🙌
Coming this week! 🙌
Hi Dave, I get very excited when you upload new videos on RUclips, thank you once again for your invaluable tutorials
Glad you like them!
Thank You 🤍✨️
source code, please ...
I will check - thought I had provided the link, but if not, I'll put it in there ASAP!
Thanks ✨️🤍😍
I appreciate your hard work to bring us such a high quality content. Thank you Dave!
You're welcome!
As always when I needed most
Happy to be right on time!
Thank you so much dave i really need this concept and you just drop a this video, how lucky I am
Right on time! Glad I could help.
🎉🎉🎉🎉🎉🎉🎉
Can we do this in React ?
This is specific to the Next.js framework. Next.js is a React framework.
❤❤
Love the 7 day beard Dave, you definiely deserve it all the work you in
Thank you!
FYI - intercepting routes in a subdirectory are broken in 14.2.3. They do work in the root of the app though. Fought that bug for about 4 hours yesterday, rolled next back to 14.1 and they work fine.
Interesting indeed. It must be a specific scenario as I have a work project currently on 14.2.3 which uses a subdirectory (..)route-segment that is working with no issues.
@@DaveGrayTeachesCode Could have been my specific scenario, but I did find a few reports in github complaining about the same issue. I was trying to intercept a rout 3 levels deep - /dashboard/questions/edit and it just wouldn't work no matter what I tried.
Nice. Thanks.
What if I have a link inside the modal like previous and next. Then after clicking these link the close button won't close the dialog instead it will keep going back to the history. What would you recommend?
I know that router.push(specificPath) can solve this. But in my case I have login button on navbar and inside the modal I have link to sign up form as well. So I want when user closes the modal they go back from where they came from
Not sure that I'm following all of your specifics, but the handle function I introduced in this video should take a user back to where they came from.
Really enjoyed this, kindly apply this on form
Thank you!
you are my awesome Dave
Thank you!
How is the coffee list still visible in the background of the modal in route /photo/1?
That's how modals work - they overlay the page underneath. The shadcn/ui Dialog component applies an overlay that has an opacity setting which lets you see what is underneath. You could customize it.
@@DaveGrayTeachesCode but for the route /photo/1 the coffee list shouldn't be displayed. Only the modal should be displayed, No?
Realy thank You for Your job!!!
Welcome!
Thank you
thanks for this tutorial.
You are welcome!
Very useful for ux!
Agree!
Half the video had nothing to do with the modal - totally unnecessary stuff
Thank you Dave
You're welcome!
Great video!
Thank you!
Thank you!
From my CV, Technology Summary
Experience: Total industry experience 14 years. Roles 2 years as Director, 3 years as Tech Lead, Full-stack Developer (8 years). AWS (5 years), Typescript/Node (6 years), React/Native (6 years), C# & Python (4 years)
Current Role: Vercel, NextJS, Inngest, Twilio, Tailwind, ShadCN, Jest, Docker, Apache Superset, VercelAI, LangGraph, OpenAI, ClaudeAI, pgVector, XState, AWS EC2/ECS/S3/VPC/Lambda/SQS/SFN/SNS, Terraform.
And I still find your videos very useful!
You have a great CV and great experience! So glad my content is still helpful for you. I'm sure you could show me a few things, too!
@@DaveGrayTeachesCode happy to share ideas. You on Discord?